<!-- src/components/DropdownPanel.vue -->
<template>
  <div class="dropdown-container">
    <!-- 触发元素插槽 -->
    <div
      class="dropdown-trigger"
      @mouseenter="openDropdown"
      @mouseleave="startCloseTimer"
    >
      <slot name="trigger"></slot>
    </div>

    <!-- 下拉内容 -->
    <transition name="fade">
      <div
        v-show="isVisible"
        class="dropdown-panel"
        @mouseenter="cancelCloseTimer"
        @mouseleave="startCloseTimer"
      >
        <slot name="content"></slot>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);
let closeTimer = null;

const openDropdown = () => {
  cancelCloseTimer();
  isVisible.value = true;
};

const startCloseTimer = () => {
  closeTimer = setTimeout(() => {
    isVisible.value = false;
  }, 200); // 200ms延迟关闭，避免鼠标移动时闪烁
};

const cancelCloseTimer = () => {
  if (closeTimer) {
    clearTimeout(closeTimer);
    closeTimer = null;
  }
};
</script>

<style scoped>
.dropdown-container {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  cursor: pointer;
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 120px;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 8px 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
